<template>
  <div class="box w">
    <div :class="leftOrRight === 'left' ? 'left' : 'right'">
      <img :src="images" alt="" v-if="leftOrRight === 'left'">
        <p v-if="leftOrRight !== 'left'">{{ text }}</p>
    </div>

    <div :class="leftOrRight === 'left' ? 'right' : 'left'">
      <img :src="images" alt="" v-if="leftOrRight !== 'left'">
        <p v-if="leftOrRight === 'left'">{{ text }}</p>
    </div>
  </div>

</template>

<script>

export default {
  name: "LeftAndRight",

  props: ["leftOrRight", "images", "text"],

  computed: {}
}
</script>

<style scoped>

.box {
  display: flex;
  justify-content: center;
  height: 600px;
}
p {
  width: 300px;
  font-size: 20px;
  line-height: 40px;
}

img {
  width: 100%;
  height: 100%;
}

.left {
  flex: 1.2;
  margin-bottom: 20px;
  box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.5)
}

.right {
  flex: 0.8;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

</style>